<!--<template>-->
<!--  <div class="userManage_main">-->
<!--    <div class="sx">-->
<!--      <div>-->
<!--        <span>用户名:</span>-->
<!--        <el-input v-model="userSX.userName" placeholder="请输入公告内容" style="width: 200px"/>-->
<!--      </div>-->
<!--      <el-pagination-->
<!--          style="position: absolute;right: 0; bottom: 0"-->
<!--          v-model:current-page="userSX.currentPage"-->
<!--          :size="'default'"-->
<!--          :disabled="false"-->
<!--          :background="false"-->
<!--          layout="total, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--          @current-change="handleCurrentChange"-->
<!--      />-->
<!--      <el-button type="primary" @click="getUser">搜索</el-button>-->
<!--    </div>-->
<!--    <div class="mx">-->
<!--      &lt;!&ndash;      数据表格&ndash;&gt;-->
<!--      <div class="mx_table">-->
<!--        <el-table :data="userList" stripe style="width: 100%" height="700px">-->
<!--          <el-table-column prop="status" label="账号状态" width="100"/>-->
<!--          <el-table-column prop="id" label="id" width="100"/>-->
<!--          <el-table-column prop="userName" label="用户名"/>-->
<!--          <el-table-column prop="nickName" label="昵称"/>-->
<!--          <el-table-column prop="level" label="权限" width="100"/>-->
<!--          <el-table-column prop="createTime" label="创建时间">-->
<!--            <template #default="scope">-->
<!--              {{ parseTime(scope.row.createTime, '{y}年{m}月{d}日') }}-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="操作">-->
<!--            <template #default="scope">-->
<!--              <el-button type="primary" @click="openUpdateUser(scope.row)">修改</el-button>-->
<!--              <el-button type="danger">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </div>-->

<!--    </div>-->

<!--    &lt;!&ndash;修改弹出框&ndash;&gt;-->
<!--    <el-dialog v-model="booleanUpdateUser" title="修改账号" width="800">-->
<!--      <el-form-->
<!--          :label-position="'right'"-->
<!--          label-width="auto"-->
<!--          :model="updateUserForm"-->
<!--          style="max-width: 600px"-->
<!--      >-->
<!--        <el-form-item label="id">-->
<!--          <el-input v-model="updateUserForm.id" disabled/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户名">-->
<!--          <el-input v-model="updateUserForm.userName" disabled/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="昵称">-->
<!--          <el-input v-model="updateUserForm.nickName"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="权限">-->
<!--          <el-input v-model="updateUserForm.level"/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->
<template>
  <div class="articleManage_main">
    <div class="sx">
      <div>
        <span>用户名：</span>
        <el-input clearable v-model="userSX.userName" placeholder="请输入用户名" style="width: 200px"/>
      </div>
      <el-pagination
          style="position: absolute;right: 0; bottom: 0"
          v-model:current-page="userSX.currentPage"
          :size="'default'"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
      />
      <el-button type="primary" @click="getUser">搜索</el-button>
    </div>
    <div class="mx">
      <!--      数据表格-->
      <div class="mx_table">
        <el-table :data="userList" stripe style="width: 100%" height="700px">
          <el-table-column prop="status" label="账号状态" width="100">
            <template #default="scope">
              {{ scope.row.status === 1 ? '正常' : '禁用' }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="id" width="100"/>
          <el-table-column prop="userName" label="用户名"/>
          <el-table-column prop="nickName" label="昵称"/>
          <el-table-column prop="level" label="权限" >
            <template #default="scope">
              {{ scope.row.level === 1 ? '管理员' : '普通用户' }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
            <template #default="scope">
              {{ parseTime(scope.row.createTime, '{y}年{m}月{d}日') }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="openUpdateUser(scope.row)">修改</el-button>
              <el-button type="danger" @click="userDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
      <!--修改弹出框-->
      <el-dialog v-model="booleanUpdateUser" title="修改账号" width="800">
        <el-form
            :label-position="'right'"
            label-width="auto"
            :model="updateUserForm"
            style="max-width: 600px"
        >
          <el-form-item label="id">
            <el-input v-model="updateUserForm.id" disabled/>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="updateUserForm.userName" disabled/>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="updateUserForm.nickName"/>
          </el-form-item>
          <el-form-item label="权限">
            <el-input v-model="updateUserForm.level"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="booleanUpdateUser = false">取消</el-button>
            <el-button type="primary" @click="updateUser">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

</template>
<script setup>
import {onMounted, ref} from "vue";
import {deleteUserApi, getUserApi, updateUserApi} from "@/api/common.js";
import {parseTime} from "@/tool/utils.js";
import {ElMessage, ElMessageBox} from "element-plus";

const selectIf = ref({status: ''})//筛选条件
const userList = ref()//表格数据
const booleanUpdateUser = ref(false)//修改账号信息弹出框
const updateUserForm = ref({
  id: -2878,
  userName: '',
  nickName: '',
  level: '',
})//修改账号信息表单
const userSX = ref({
  currentPage: 1,
  pageSize: 10,
  userName:''
})
const total = ref(0)
//开局
onMounted(() => {
  initData()
})

function initData() {
  getUser()
}

//获取账号
function getUser() {
  getUserApi(userSX.value).then(res => {
    userList.value = res.data.userList
    total.value = res.data.total
  })
}

//切页数
function handleCurrentChange(currentPage) {
  userSX.value.currentPage = currentPage
  getUser()
}

function openUpdateUser(data) {
  booleanUpdateUser.value = true
  updateUserForm.value.id = data.id
  updateUserForm.value.userName = data.userName
  updateUserForm.value.nickName = data.nickName
  updateUserForm.value.level = data.level
}
function updateUser(){
  booleanUpdateUser.value = false
  updateUserApi(updateUserForm.value).then(res=>{
    ElMessage({message: res.msg, type: 'success'})
    getUser()
  })
}

//删除文章
function userDelete(id) {
  ElMessageBox.confirm(
      '你确定要删除这个账号吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteUserApi(id).then(res => {
          ElMessage({message: res.msg, type: 'success'})
          getUser()
        })
      })

}

</script>

<style scoped>
.articleManage_main {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-top: 10px;
}

.sx {
  position: relative;
  width: 98%;
  height: 100px;
  background-color: white;
  margin: 0 auto 10px auto;
  border-radius: 3px;
}

.mx {
  width: 98%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  border-radius: 3px;
}
</style>